import React, { useState } from 'react'
import { Button, Form, Input, Toast } from "antd-mobile";
import Headers from '../../components/Header/Header'
import { reqLogin } from '../../request/api';
import './Login.less'
import logo from '../../assets/img/login_logo.png'


const Login=(props)=>{
  const [user, setUser] = useState({
    phone:"",
    password:""
  })
  const doLogin=()=>{
    reqLogin(user).then(res=>{
      if(res.data.code===200){
        Toast.show({
          content:res.data.msg
        })
        // 存用户信息
        sessionStorage.setItem('userinfo',JSON.stringify(res.data.list));
        // 跳转
        props.history.push('/index/home');
      }
    })
  }
  return (
    <div className='login'>
    <Headers back title='登录' register></Headers>
    <div>{JSON.stringify(user)}</div>
    <div className='form'>
     <div className='logo'>
       <img src={logo} alt="" />
     </div>
    <Form layout="horizontal">
      <Form.Item label="手机号" name="phone">
        <Input
          placeholder="请输入手机号"
          clearable
          //   defaultValue={user.phone}
          onChange={(e) => setUser({...user,phone:e})}
        />
      </Form.Item>

      <Form.Item label="密码" name="password">
        <Input
          placeholder="请输入密码"
          clearable
          type="password"
          //   defaultValue={user.password}
          onChange={(e) => setUser({...user,password:e})}
        />
      </Form.Item>
    </Form>

    <div className="text-center">
      <Button color="primary" onClick={()=>doLogin()}>登录</Button>
    </div>
    </div>
  </div>
  )
}
export default Login;